<template>
    <div>
        <el-dialog :visible.sync="landingPage" width="900px" class="ladng-main" center
            @close="$emit('update:landshow', false)" :close-on-click-modal="false" :landshow="landshow" :loading="loading">
            <el-tabs v-model="activePage">
                <el-tab-pane label="使用自定义落地页" name="first">
                    <el-row type="flex" align="middle" style="flex-wrap: wrap;">
                        <div class="form-wrapper">
                            <el-select v-model="landType" @change="changeType" placeholder="请选择" size="small">
                                <el-option label="橙子落地页" value="chengzi"></el-option>
                                <el-option label="第三方落地页" value="third"></el-option>
                            </el-select>
                        </div>
                        <!-- <div class="form-wrapper">
                            <el-select v-model="landSelet" placeholder="请选择" size="small">
                                <el-option label="全部" value="1"></el-option>
                                <el-option label="我创建的落地页" value="2"></el-option>
                                <el-option label="共享的落地页" value="3"></el-option>
                            </el-select>
                        </div> -->
                        <div class="form-wrapper">
                            <el-input size="small" placeholder="请输入落地页名称关键词或ID" v-model="LandingName"
                                class="input-with-select" style="width: 320px;">
                                <el-button @click="loadData" slot="append" icon="el-icon-search" type="primary">搜索
                                </el-button>
                            </el-input>
                        </div>
                    </el-row>
                    <div class="ladng-content">
                        <!-- <el-row type="flex" justify="end" class="content-header">
                            <div class="form-wrapper">
                                <el-select v-model="landTime" placeholder="请选择" size="small">
                                    <el-option label="创建时间从新到旧" value="1"></el-option>
                                    <el-option label="创建时间从旧到新" value="2"></el-option>
                                </el-select>
                            </div>
                        </el-row> -->
                        <div class="rolling-load">
                            <div class="page-box" v-for="(pagebox,index) in pageboxs" :key="pagebox.id"
                                @mouseenter="onMouseOver(index)" @mouseleave="onMouseOut(index)">
                                <div class="page-preview">
                                    <img :src="pagebox.thumbnail" alt="">
                                    <div v-show="seen && n == index" @click="changeurl(pagebox)" class="page-btn">点击使用</div>
                                </div>
                                <div class="page-info">
                                    <div class="page-title">{{pagebox.name}}</div>
                                    <div class="page-id">ID: {{pagebox.id}}</div>
                                </div>
                            </div>
                        </div>
                        <el-row type="flex" justify="end" style="margin-top: 20px;">
                            <el-pagination background layout="prev, pager, next" :current-page="curPage" :total="total" :page-size="pageSize" @current-change="handleCurrentChange($event)">
                            </el-pagination>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="使用程序化落地页" disabled name="second"></el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<style>
    .ladng-main .el-dialog__header {
        padding: 0;
    }

    .ladng-main .el-dialog__body {
        padding: 15px 0 0 0;
    }

    .ladng-main .el-tabs__header {
        padding: 0 15px;
    }

    .ladng-main .el-dialog__headerbtn {
        z-index: 99;
    }

    .ladng-main .ladng-content {
        width: 100%;
        height: 513px;
        overflow: auto;
        background-color: #f8f9fa;
        padding: 12px 15px;
        border-top: 1px solid #E4E9ED;
    }

    .ladng-main .ladng-content .content-header {
        height: 40px;
        line-height: 30px;
    }

    .ladng-main .rolling-load {
        width: 100%;
        height: 100%;
        /* overflow: auto; */
        position: relative;
    }

    .ladng-main .page-box {
        float: left;
        width: 201px;
        height: 448px;
        background: #FFFFFF;
        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        margin-right: 16px;
        margin-bottom: 16px;
        overflow: hidden;
    }

    .ladng-main .page-box:nth-child(4n) {
        margin-right: 0;
    }

    .ladng-main .page-preview {
        overflow: hidden;
        height: 356px;
        position: relative;
        cursor: pointer;
    }

    .ladng-main .page-preview img {
        width: 100%;
    }

    .ladng-main .page-box .page-info {
        font-size: 14px;
        line-height: 22px;
        color: #666666;
        padding: 12px 16px;
    }

    .ladng-main .page-btn {
        cursor: pointer;
        position: absolute;
        left: 0;
        bottom: 0;
        /* display: none; */
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: #2F88FF;
        color: #fff;
    }

    .ladng-main .page-box .page-title {
        color: #2F88FF;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* margin-top: 28px; */
    }

    .ladng-main .page-info .page-id {
        margin-top: 4px;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .url-info-wrapper {
        padding: 8px;
        width: 300px;
        background: #f8f9fa;
        border: 1px solid #e1e5e8;
        border-radius: 5px;
        margin-top: 20px;
        position: relative;
    }

    .url-info-wrapper .el-icon-caret-top {
        position: absolute;
        color: #e1e5e8;
        top: -15px;
        font-size: 21px;
        left: 20px;
    }

    .url-info-wrapper .url-info-img {
        width: 47px;
        height: 70px;
        overflow: hidden;
    }

    .url-info-wrapper .url-info-img img {
        width: 100%;
        min-height: 70px;
        object-fit: cover;
        vertical-align: bottom;
    }

    .url-info-wrapper .url-info-link {
        width: 210px;
        display: inline-block;
        vertical-align: top;
        margin-left: 8px;
        line-height: initial;
    }

    .url-info-wrapper .url-info-link .info-title {
        width: 210px;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 4px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #409EFF;
    }

    .url-info-wrapper .url-info-link .info-desc {
        display: flex;
        color: #666;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
    }
</style>
<script>
import {
        pageParams
    } from '@/settings'
    export default {
        name: 'LandingPicker',
        props: {
            landshow: {
                type: Boolean,
                default: false
            },
            advertiser_id: {
                type: String
            }
        },
        data() {
            return {
                loading: false,
                landingPage: this.landshow,
                landType: 'chengzi',
                // landSelet: '1',
                // landTime: '1',
                activePage: 'first',
                LandingName: '',
                pageSize: pageParams.pageSize,
                curPage: 1,
                total: 0,
                pageboxs: [],
                n: 0,
                seen: false,
            }
        },
        watch: {
            landshow() {
                this.landingPage = this.landshow
                if (this.landingPage) {
                    this.loadData()
                }
            }
        },
        methods: {
            loadData() {
                this.loading = true
                let param = {
                    page: this.curPage,
                    number: this.pageSize,
                    advertiser_id: this.advertiser_id,
                    type: this.landType,
                    keyword: this.LandingName
                }
                this.$axios.get('/czsite', param)
                    .then(e => {
                        console.log('eee', param, e)
                        let data = e.data.list
                        data.forEach(ele => {
                            ele.id = ele.site_id ? ele.site_id : ele.siteId
                        })
                        this.pageboxs = data
                        this.total = e.data.page_info.total_number
                    })
            },
            handleCurrentChange(val) {
                this.curPage = val
                this.loadData()
            },
            changeType() {
                this.curPage = 1
                this.loadData()
            },
            onMouseOver(index) {
                this.seen = true;
                this.n = index;
            },
            onMouseOut(index) {
                this.seen = false;
                this.n = index;
            },
            changeurl(item) {
                item['type'] = this.landType
                this.$emit('urlshow', item);
                this.landingPage = false;
            }
        }
    }
</script>